<template>
  <div class="storeFilter">

    <div class="contont">
      <van-field
        v-model="fieldValue"
        is-link
        readonly
        label="地区市县："
        placeholder="请选择所在地区"
        @click="show = true"
      />
      <van-popup v-model="show" round position="bottom" :lazy-render="false">
        <van-cascader
          v-model="countyId"
          :field-names="fieldNames"
          title="请选择所在地区"
          :options="cityList"
          @close="show = false"
          @finish="onFinish"
          @change="onChange"
        />
      </van-popup>
    </div>
    <div class="contont">
      <van-field
        v-model="shopName"
        is-link
        readonly
        label="选择门店："
        placeholder="选择门店"
        @click="typeshow = true"
      />
      <van-popup v-model="typeshow" round position="bottom">
        <van-picker
          title="选择门店"
          show-toolbar
            value-key="name"
          :columns="option"
          @confirm="onConfirm2"
          @cancel="typeshow = false"
        />
      </van-popup>
    </div>
    <div class="btn">
      <van-button type="primary" @click="search" :disabled="isDisabled"
        >查询</van-button
      >
    </div>
  </div>
</template>

<script>
import { cityList, countyList, getShopNameList } from './service/service.js'
export default {
  data () {
    return {
      show: false,
      showtime: false,
      fieldValue: '',
      shopName: '',
      countyId: '',

      typeshow: false,
      value: 1,
      fieldNames: {
        text: 'orgname',
        value: 'orgid',
        children: 'children'
      },
      tcId: -1,
      cityList: [],
      option: [],
      optionid: [],

      isDisabled: false
    }
  },
  name: 'storeFilter',
  methods: {

    onChange (value) {
      const id = value.selectedOptions[0].orgid
      this.cityId = id
      if (id === 0) return
      this.getcount(id)
    },
    onConfirm2 (value, index) {
      console.log(value, index)
      this.shopName = value.name
      this.typeshow = false
      this.tcId = this.optionid[index]
    },
    onFinish ({ selectedOptions }) {
      this.show = false
      this.fieldValue = selectedOptions
        .map((option) => option.orgname)
        .join('/')
    },

    getcity () {
      cityList().then((res) => {
        if (res.data.ret === 0) {
          this.cityList = res.data.cityList
          this.cityList.forEach((element) => {
            if (element.orgname !== '全省') {
              this.$set(element, 'children', [])
            }
          })
        }
      })
    },

    getcount (id) {
      countyList({ cityId: id }).then((res) => {
        if (res.data.ret === 0) {
          const countyList = res.data.countyList
          this.cityList.forEach((element, index) => {
            if (id === element.orgid) {
              this.cityList[index].children = countyList
            }
          })
        } else {
          this.$toast.fail('网络错误')
        }
      })
    },
    getShop () {
      getShopNameList().then((res) => {
        if (res.data.ret === 0) {
          this.option = res.data.data
          // this.cityList.forEach((element, index) => {
          //   if (id == element.orgid) {
          //     this.cityList[index].children = countyList
          //   }
          // })
        } else {
          this.$toast(res.data.msg)
        }
      })
    },
    search () {
      console.log(this.countyId)
      this.$router.push({ path: '/channel/channel-home', query: { cityId: this.cityId, countyId: this.countyId, shopName: this.shopName } })
    }

  },
  created () {
    this.getcity()
    this.getShop()
  }
}
</script>

<style lang="less" scoped>
.storeFilter {
  font-family: PingFangSC-Regular, PingFang SC;
  width: 100vw;
  // height: 100vh;
  background-color: #ffffff;
  padding-top: 10px;
  .time {
    margin: 0 16px;
    border-top: 1px solid #ebedf0;
    border-bottom: 1px solid #ebedf0;
    height: 44px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #c8c9cc;
    .start {
      width: 6.2em;
      margin-right: 12px;
      font-size: 14px;
      line-height: 24px;
      color: rgb(100, 101, 102);
    }
    .time-r {
      display: flex;
      width: calc(100% - 6.2em);
      justify-content: space-between;
      line-height: 24px;
      div {
        width: 50%;
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .button {
    padding: 0 16px;
    margin-top: 80px;
    display: flex;
    height: 44px;
    text-align: center;
    font-size: 16px;
    line-height: 44px;
    color: #ffffff;
    .but_left {
      width: 41.1%;
      background-color: #ff7645;
      border-top-left-radius: 22px;
      border-bottom-left-radius: 22px;
    }
    .but_right {
      background-color: #1890ff;
      border-top-right-radius: 22px;

      border-bottom-right-radius: 22px;
      width: 58.9%;
    }
  }
}
/deep/ .van-icon {
  height: 24px;
  font-size: 16px;
  line-height: 24px;
  color: #bebebe;
}
.btn {
  text-align: center;
  width: 100%;
  margin-top: 80px;
  button {
    width: 80%;
    height: 44px;
    background: #1890ff;
    border: 1px solid #1890ff;
    border-radius: 5px;
  }
}
</style>
